<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .colorBox {
            position: absolute;
            top: 20px;
            right: 300px;
            padding: 0 15px;
            line-height: 45px;
            font-size: 20px;
            color: red;
            background: lightblue;
            background: -webkit-linear-gradient(top left, lightblue, lightcoral, lightcyan);

        }
    </style>
</head>

<body>
    <div class="colorBox">
        2023年05月19日 星期五 18:56:21
    </div>
    <script>
        let box = document.querySelector('.colorBox')

        function addZero(val) {
            val = Number(val)
            return val < 10 ? '0' + val : val
        }

        // queryDate()获得日期
        function queryDate() {
            let time = new Date()
            let year = time.getFullYear()//年
            let month = time.getMonth() + 1//月
            let day = time.getDate()//日

            let weekAry = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            let week = weekAry[time.getDay()]//日期

            let hour = time.getHours()//时
            let minutes = time.getMinutes()//分
            let seconds = time.getSeconds()//秒

            //拼接字符串
            let result = year + '年' + addZero(month) + '月' + addZero(day) + '日' + ' ' + week + ' ' + addZero(hour) + ':' + addZero(minutes) + ':' + addZero(seconds)

            box.innerHTML = result

        }
        //定时器
        setInterval(queryDate, 1000)
    </script>
</body>

</html>